<script setup lang="ts">
import myUser from "@/composables/myUser.ts";
import dayjs from "dayjs";
import myAuth from "@/composables/myAuth.ts";
const route = useRoute();
const u_id =  route.params?.u_id
const {getOneUser,user,getOneUserFavoriteTopics,topics} = myUser()
await getOneUser(u_id);
await getOneUserFavoriteTopics({page:route.query?.page || 1,u_id:route.params?.u_id});
</script>

<template>
<main class="me" v-if="user">
  <my-me-avatar :user="user"/>
  <div class="bottom">
    <div class="buttons">
      <router-link :to="{name:'person.me'}" :class="{active:$route.name == 'person.me'}">
        TA的帖子
      </router-link>
      <router-link :to="{name:'person.me_comment'}" :class="{active:$route.name == 'person.me_comment'}">
        TA的评论
      </router-link>
      <router-link v-if="myAuth().is_mine(u_id)" :to="{name:'person.me_favorite'}" :class="{active:$route.name == 'person.me_favorite'}">
        我的收藏
      </router-link>
    </div>
    <div class="list" v-if="topics">
      <el-card shadow="never">
        <section class="item" v-for="(topic,index) in topics.data" :key="index">
          <div class="left" @click="$router.push({name:'front.topic.show',params:{t_id:topic.id}})">
            <el-tag type="primary">帖子</el-tag>
            <span class="">{{topic.title}}</span>
          </div>
          <div class="right">
              <icon-timer fill="#50e3c2" size="14"/>
              {{dayjs(topic.created_at).fromNow()}}
          </div>
        </section>
        <div class="page">
          <my-pagination
              :per_page='topics.meta.per_page'
              :total='topics.meta.total'
              @currentChange="$router.push({ name: 'person.me_favorite',params:{u_id:$route.params.u_id}, query: { page: $event } })"
          />
        </div>
      </el-card>
    </div>
    <div v-else class="p-3 flex justify-center items-center text-slate-600 gap-2 text-sm">
      <icon-info  size="20" fill="#f5a623"/> TA没有发帖
    </div>
  </div>
</main>
</template>

<style lang="scss" scoped>
main.me{
  @apply min-h-screen p-3;

  div.bottom{
    @apply mt-2;
    div.buttons{
      @apply flex justify-center items-center gap-2 ;
      a{
        @apply bg-slate-800 text-slate-100 py-1 px-2 text-xs rounded hover:bg-slate-600 duration-300;
        &.active{
          @apply bg-slate-600;
        }
      }
    }
    div.list{
      @apply mt-3;
      section.item{
        @apply p-3 border-b border-b-slate-400 flex justify-between items-center;
        div.left{
          @apply flex justify-start items-center gap-2 text-sm text-slate-600 hover:text-green-600 duration-300 cursor-pointer;
        }
        div.right{
          @apply flex justify-center items-center text-xs text-slate-500 gap-2;
        }
      }
    }
  }
}
</style>